import Nerv from "nervjs";

var _this = this;

import { View, Image } from '@tarojs/components';
import './HeroSkillList.scss';
import Taro from "@tarojs/taro-h5";

class HeroSkillList extends Taro.Component {
  render() {
    const props = this.props;

    const { skillList } = props;
    const [currentSkill, setCurrentSkill] = Taro.useState(0);
    function handleClickSkill(index) {
      setCurrentSkill(index);
    }
    return <View className="HeroSkillList">
      <View className="HeroSkillList-Images">
        {skillList.map((skill, index) => <View className="HeroSkillList-Images-Outer">
            <Image key={skill.name} className={`HeroSkillList-Images-Image ${index === currentSkill ? 'selected' : ''}`} src={skill.image} onClick={handleClickSkill.bind(this, index)} />
            {index === currentSkill && <View className="HeroSkillList-Images-Triangle"></View>}
          </View>)}
      </View>
      <View className="HeroSkillList-Info">
        <View className="HeroSkillList-Info-Name">{skillList[currentSkill].name}</View>
        <View className="HeroSkillList-Info-CD">{skillList[currentSkill].cd}</View>
        <View className="HeroSkillList-Info-CD">{skillList[currentSkill].consume}</View>
        <View className="HeroSkillList-Desc">{skillList[currentSkill].desc}</View>
      </View>
    </View>;
  }

}

export default HeroSkillList;